<template>
	<view class="content">
		<!-- 总共件数 -->
		<view v-if="goodsList" class="total">
			<text>当前收藏了{{goodsList.length}}件商品</text>
		</view>
		<view v-if="goodsList">
			<!-- 循环 -->
			<view class="items" v-for="(item,index) in goodsList">
				<!-- 每个item -->
				<view class="item"  @click="gotoDetail(item)" @tap="gotoDetail(item)">
					<image :src="item.img" mode="aspectFit"></image>
					<view class="priceItem">
						<text>RMB</text><b>{{item.price}}</b>
					</view>
				</view>
			</view>
			
		</view>
		<view class="hasNotGoods" v-else="goodsList">
			<image src="../../static/content/hasNotGoods.png" mode="aspectFit"></image>
			<div>还没收藏宝贝哦</div>
		</view>
		
	</view>
</template>

<script>
	import {
	    mapState 
	} from 'vuex';  
	export default {
		data() {
			return {
				goodsList:null,
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		async onLoad() {
			let ip = await this.$api.json("ip")
			uni.request({
				url: ip + `collect/queryAll`,
				data:{
					userId:this.userInfo.id,
				},
				success: (res) => {
					if(res.data.status == 1){
						this.goodsList = res.data.content
					}
				}
			});
		},
		methods: {
			// 进入单个服饰详情页
			gotoDetail(item) {
				console.log(item.id)
				uni.navigateTo({
				    url: `/pages/product/product?id=${item.goodsId}`
				});
			},
		}
	}
</script>

<style lang="scss">
	page,
	.content {
		height: 100%;
		width: 100%;
		background-color: #f8f8f8;
		margin-top: 20rpx;
		display: block;
		text-align: center;
	}
	/* 容器样式 */
	.items {
		margin: 0rpx 60rpx;
		text-align: center;
		.item {
			font-size: 30rpx;
			image {
				height: 300rpx;
				width: 200rpx;
			}
			float: left;
			margin: 80rpx 50rpx -25rpx;
			width: 200rpx;
			height: 300rpx;
			border: 1rpx solid #EBEEF5;
		}
	}
	.priceItem{
		text{
			font-size: 10rpx;
		}
	}
	// .total{
	// 	position: absolute;
	// 	left: 20%;
	// 	text-align: center;
	// 	border: solid 1rpx #EDEDED;
	// 	box-shadow: 3rpx 3rpx 1rpx 5rpx;
	// 	text-shadow: 1rpx 4rpx 3rpx;
	// 	height: 80rpx;
	// 	width: 420rpx;
	// 	line-height: 80rpx;
	// }
	.total{
		position: absolute;
		left: 20%;
		text-align: center;
		border: solid 1rpx #A5A4A4;
		color: #A5A4A4;
		height: 80rpx;
		width: 420rpx;
		line-height: 80rpx;
	}
	.hasNotGoods{
		margin-top: 350rpx;
		image{
			height: 200rpx;
			width: 200rpx;
		}
		text-align: center;
		line-height: 50rpx;
	}
</style>
